<template>
  <view class="product-page">
    <view v-for="product in products" :key="product.id" class="product-card">
      <image :src="product.image" class="product-image" mode="aspectFit"></image>
      <view class="product-info">
        <text class="product-name">{{ product.name }}</text>
        
        <text class="product-desc">{{ product.description }}</text>
        
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        products: [
          {
            id: 1,
            image: '/static/c1.png',
            name: 'PP 养殖池',
            price: '¥58.00/5kg',
            description: '食品级PP 材料',
            date: '2024-05-10'
          },
          {
            id: 2,
            image: '/static/c2.png',
            name: '循环水泵',
            price: '¥39.00/斤',
            description: '系统动力源',
            date: '2024-05-12'
          },
          {
            id: 3,
            image: '/static/c3.png',
            name: '高压风机',
            price: '¥2.50/个',
            description: '养殖水体增氧',
            date: '2024-05-15'
          },
		  {
		    id: 4,
		    image: '/static/c4.png',
		    name: '制氧机',
		    price: '¥2.50/个',
		    description: '净化水质',
		    date: '2024-05-15'
		  },
		  {
		    id: 5,
		    image: '/static/c5.png',
		    name: '臭氧一体机',
		    price: '¥2.50/个',
		    description: '增加溶解氧',
		    date: '2024-05-15'
		  },
		 
		  {
		    id: 6,
		    image: '/static/c6.png',
		    name: '蛋白质分离器',
		    price: '¥2.50/个',
		    description: '去除多余有机物、 残饵、粪便',
		    date: '2024-05-15'
		  },
		  {
		    id: 7,
		    image: '/static/c7.png',
		    name: '生物过滤器',
		    price: '¥2.50/个',
		    description: '分离氨氮、亚硝酸盐',
		    date: '2024-05-15'
		  },
		  {
		    id: 8,
		    image: '/static/c8.png',
		    name: '溶氧锥',
		    price: '¥2.50/个',
		    description: '提供高溶氧水',
		    date: '2024-05-15'
		  },
		  {
		    id: 9,
		    image: '/static/c9.png',
		    name: '罗茨鼓风机',
		    price: '¥2.50/个',
		    description: '高效率节能省电',
		    date: '2024-05-15'
		  },
		  {
		    id: 10,
		    image: '/static/c10.png',
		    name: '空气源热泵',
		    price: '¥2.50/个',
		    description: '智能控温系统',
		    date: '2024-05-15'
		  },
		  {
		    id: 11,
		    image: '/static/c11.png',
		    name: '设备控制箱',
		    price: '¥2.50/个',
		    description: '设备控制箱',
		    date: '2024-05-15'
		  },
		  {
		    id: 12,
		    image: '/static/c12.png',
		    name: '不锈钢紫外线杀菌器',
		    price: '¥2.50/个',
		    description: '不锈钢紫外线杀菌器',
		    date: '2024-05-15'
		  },
		  {
		    id: 13,
		    image: '/static/c13.png',
		    name: '吸污泵',
		    price: '¥2.50/个',
		    description: '防止污物堆积',
		    date: '2024-05-15'
		  },
		  {
		    id: 14,
		    image: '/static/c14.png',
		    name: '过滤砂缸',
		    price: '¥2.50/个',
		    description: '把微水污物消除',
		    date: '2024-05-15'
		  },
		  {
		    id: 15,
		    image: '/static/c15.png',
		    name: '全自动箱式滚筒微滤机',
		    price: '¥2.50/个',
		    description: '固液分离',
		    date: '2024-05-15'
		  },
		  {
		    id: 16,
		    image: '/static/c16.png',
		    name: '紫外线杀菌装置',
		    price: '¥2.50/个',
		    description: '杀菌消毒',
		    date: '2024-05-15'
		  },
        ]
      };
    }
  }
</script>

<style lang="scss">
.product-page {
  background-color: #f5f5f5;
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.product-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  display: flex;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 28rpx;
  color: #e64340;
  display: block;
  margin-bottom: 10rpx;
}

.product-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.product-date {
  font-size: 24rpx;
  color: #999;
  display: block;
}
</style>
